<template>
	<om-page :title="pageTitle">
		<om-topbutton :hasBgColor="true" @click='searchTab'></om-topbutton>
		<view class="page__bd" style="margin-top:53px;">
			<uni-list>
				<view v-for="(item, index) in datas" :key="index">
					<uni-list-item
						showArrow
						:title="item.avatar?(item.id === userId ? '我' : item.username):(item.id === userId ? '我' : item.username.substr(1, item.username.length))"
						:avatar="item.username.substr(0, 1)"
						:thumb="item.avatar"
						:avatarBgColor="logoColors.length?logoColors[item.id%logoColors.length].name:''"
						@click="infoTab(item,index)"
						:note="item.mobile && item.workMobile ? item.mobile + ', ' + item.workMobile : item.mobile ? item.mobile : ''"
						:extraText="item.posname ? item.posname : ''"
					></uni-list-item>
				</view>
			</uni-list>
		</view>
		<tui-loadmore :visible="commonData.loading"></tui-loadmore>
		<tui-nomore :visible="!commonData.pullUpOn"></tui-nomore>
		<tui-scroll-top :scrollTop="scrollTop" style="background: rgba(124, 174, 255, 0.5)"></tui-scroll-top>
	</om-page>
</template>

<script>
import listLoad from '../../../../static/js/listLoad.js';
import { mapState } from 'pinia';
import {useLoginUserStore} from '@/stores/login-user.js';
export default {
	data() {
		return {
			logoColors:[],
			scrollTop: 0,
			commonData: {
				datas:[]
			},
			dataMap:{},
			pageTitle:"OM通讯录"
		};
	},
	computed: {
		...mapState(useLoginUserStore, ['userId', 'orgId']),
	　　datas() {
	　　　　return this.commonData.datas
	　　}
	},
	watch: {
	　　datas(newValue, oldValue) {
			let _that = this
	　　　　newValue.forEach((item)=>{
				_that.dataMap[item.id] = item
			})
	　　}
	},
	methods: {
		searchTab() {
			uni.navigateTo({
				url: 'search'
			});
		},
		infoTab(item,index) {
			uni.setStorage({
				key: 'phoneInfo',
				data: item
			});
			uni.navigateTo({
				url: '../info/info?colorIndex=' + index
			});
		}
	},
	onLoad() {
		uni.setNavigationBarTitle({
			title: 'OM通讯录'
		});
		listLoad.initData(this, 'wxAddr/getAddrList');
		this.logoColors = this.CuColorList
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	//页面相关事件处理函数--监听用户下拉动作
	onPullDownRefresh: function() {
		listLoad.pullDownRefresh(this);
	},

	// 页面上拉触底事件的处理函数
	onReachBottom: function() {
		listLoad.reachBottom(this);
	}
};
</script>

<style></style>
